<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>登录</title>
		<!-- 样 式 文 件 -->
		<link rel="stylesheet" href="component/pear/css/pear.css" />
		<link rel="stylesheet" href="admin/css/other/login.css" />
	</head>
    <!-- 代 码 结 构 -->
	<body background="admin/images/background.svg" style="background-size: cover;">
		<form class="layui-form" action="javascript:void(0);">
			<div class="layui-form-item">
				<img class="logo" src="admin/images/logo.png" />
				<div class="title">忘忧商城</div>
				<div class="desc">
					忘忧商城后台管理系统
				</div>
			</div>
			<div class="layui-form-item">
				<input placeholder="账 户 : admin " name="account" lay-verify="required" hover class="layui-input"  />
			</div>
			<div class="layui-form-item">
				<input placeholder="密 码 : admin " name="password" lay-verify="required" type="password" hover class="layui-input"  />
			</div>
			<div class="layui-form-item">
				<input placeholder="验证码 : " id="captchval" hover  lay-verify="required" class="code layui-input layui-input-inline"  />
				<img src="/api/system/user/captcha" class="codeImage" />
			</div>
			<!-- <div class="layui-form-item">
				<input type="checkbox" name="" title="记住密码" lay-skin="primary" checked>
			</div> -->
			<div class="layui-form-item">
				<button type="button" class="pear-btn pear-btn-success login" lay-submit lay-filter="login">
					登 入
				</button>
			</div>
		</form>
		<!-- 资 源 引 入 -->
		<script src="component/layui/layui.js"></script>
		<script src="component/pear/pear.js"></script>
		<script>
			layui.use(['form', 'button', 'popup'], function() {
				var form = layui.form;
				var button = layui.button;
				var popup = layui.popup;
				var $ = layui.jquery;
				
                // 登 录 提 交
				form.on('submit(login)', function(data) {

					///验证码
					const cookieValue = window.getCookie("verifyCode");
					// const result = eval(cookieValue.substring(0,cookieValue.indexOf("=")-1));
					// console.log(result,'值为');

					if(cookieValue == $("#captchval").val()){
						/// 登录
						$.ajax({
							method:"post",
							contentType:"application/json",
							data:JSON.stringify(data.field),
							url:'/api/system/user/login',
							success:function (d){
								if(d.code === 200){
									popup.success("登录成功", function() {
										//缓存一token
										sessionStorage.token = d.data;

										location.href = "index.html"
									});
								}else{
									popup.failure(d.msg);
								}
							}
						});
					}else{
						popup.failure("验证码失败", function() {
							$("#captchval").val("")
						});
					}
					return false;
				});

				/**
				 * 获得cookie里面的值
				 */
				window.getCookie = function (name) {
					const cookieName = name + "=";
					const decodedCookie = decodeURIComponent(document.cookie);
					const cookies = decodedCookie.split(';');
					for (let i = 0; i < cookies.length; i++) {
						let cookie = cookies[i];
						while (cookie.charAt(0) === ' ') {
							cookie = cookie.substring(1);
						}
						if (cookie.indexOf(cookieName) === 0) {
							return cookie.substring(cookieName.length, cookie.length);
						}
					}
					return "";
				}
			})
		</script>
	</body>
</html>
